var app = new PIXI.Application(1920, 600, { antialias: true,transparent: true });
var container = new PIXI.Container();
var container2 = new PIXI.Container();
var graphics = new PIXI.Graphics();

document.body.appendChild(app.view);

var blurFilter = new PIXI.filters.BlurFilter();
blurFilter.blur = 20;
PIXI.loader.add("bgFrontImg", "img/bg_staff.png");
PIXI.loader.load(setup);
function setup(loader, resources){
    //var bgFront = new PIXI.Sprite(resources["bgFrontImg"].texture);
    var bgFront = new PIXI.extras.TilingSprite(
        resources["bgFrontImg"].texture,
        app.screen.width,
        app.screen.height
    );
    bgFront.position.set(0, 0);
    var videoDemo = document.getElementById('testDemo');
    console.log(videoDemo);
    // create a video texture from a path
    var texture = PIXI.Texture.fromVideo(videoDemo);

    // create a new Sprite using the video texture (yes it's that easy)
    var videoSprite = new PIXI.Sprite(texture);
    videoSprite.filters = [blurFilter];
    // Stetch the fullscreen
    videoSprite.width = app.screen.width+80;
    videoSprite.height = app.screen.height+80;
    videoSprite.x = -40;
    videoSprite.y = -40;
    container.addChild(bgFront)
    container.addChild(videoSprite);
    container.mask = bgFront;

    // set a fill and a line style again and draw a rectangle
    // graphics.beginFill(0xFF3300);
    // graphics.moveTo(50,50);
    // graphics.lineTo(250, 50);
    // graphics.lineTo(100, 100);
    // graphics.lineTo(50, 50);
    // graphics.endFill();
    // var graphicsSprite = new PIXI.Sprite(graphics.generateCanvasTexture());
    // graphicsSprite.position.set(0, 82);
    // container2.addChild(videoSprite);
    // container2.mask = graphicsSprite;

    app.stage.addChild(container);
    app.stage.addChild(container2);
}
